import React, { useRef, useEffect } from 'react';
import Linear from './Linear';

const LinearPath = props => {

    const canvasRef = useRef(null);
    const linear = useRef(null);

    const initLinear = () => {
        const myCanvas = canvasRef.current;
        linear.current = new Linear(myCanvas);
    }

    const drawSimpleLine = () => {
        linear.current.drawSimplePath()
    }

    const drawWeightPath = () => {
        linear.current.drawWeightPath()
    }

    const drawGradientPath = () => {
        linear.current.drawGradientPath()
    }

    const drawPolyLinePath = () => {
        linear.current.drawPolyLinePath()
    }

    const drawBrokePolyLinePath = () => {
        linear.current.drawBrokePolyLinePath()
    }

    const drawBrokePolyLineErrorPath = () => {
        linear.current.drawBrokePolyLineErrorPath()
    }

    const drawCompareStepPath = () => {
        linear.current.drawCompareStepPath()
    }

    const drawCompareStepFill = () => {
        linear.current.drawCompareStepFill();
    }

    const drawDiffLinePath = () => {
        linear.current.drawDiffLinePath();
    }

    const drawEnevDashedPath = () => {
        linear.current.drawDashedPath([25, 5])
    }

    const drawDashCompare = () => {
        linear.current.drawDashCompare()
    }

    const drawAveragePath = () => {
        linear.current.drawDashedPath([10])
    }

    const drawDashRect = () => {
        linear.current.drawDashRect()
    }

    const drawCircle = () => {
        linear.current.drawCircle()
    }

    const drawHDottedPath = () => {
        linear.current.drawDottedPath(10, 100, 100, 100);
    }

    const drawVDottedPath = () => {
        linear.current.drawDottedPath(10, 100, 10, 300);
    }

    const drawButtLineCap = () => {
        linear.current.drawLineCap('butt');
    }

    const drawRoundLineCap = () => {
        linear.current.drawLineCap('round');
    }

    const drawSquareLineCap = () => {
        linear.current.drawLineCap('square');
    }

    useEffect(()=>{
        initLinear();
    }, [])

    return <div>
        <canvas ref={canvasRef} width="500" height="500"></canvas>
        <p className="subtitle">线性路径</p>
        <button onClick={drawSimpleLine}>画一条简单的直线</button>
        <button onClick={drawWeightPath}>画一条更宽的红线</button>
        <button onClick={drawGradientPath}>画一条宽宽的渐变线</button>
        <button onClick={drawPolyLinePath}>画一条普通的折线</button>
        <button onClick={drawBrokePolyLinePath}>画一幅普通的破裂线</button>
        <br />
        <button onClick={drawBrokePolyLineErrorPath}>画一条错误的破裂线</button>
        <button onClick={drawCompareStepPath}>画两条线看差别</button>
        <button onClick={drawCompareStepFill}>填充两个图形看差别</button>
        <button onClick={drawDiffLinePath}>像素边界</button>
        <p className="subtitle">虚线和圆点线</p>
        <button onClick={drawEnevDashedPath}>绘制偶数参数虚线</button>
        <button onClick={drawDashCompare}>奇偶数参数虚线比较</button>
        <button onClick={drawAveragePath}>单参数虚线</button>
        <button onClick={drawDashRect}>虚线矩形</button>
        <button onClick={drawCircle}>画一个圆试试</button>
        <button onClick={drawHDottedPath}>画一条水平圆点线</button>
        <br />
        <button onClick={drawVDottedPath}>画一条水平圆点线</button>
        <p className="subtitle">线型</p>
        <button onClick={drawButtLineCap}>一条线--无线帽</button>
        <button onClick={drawSquareLineCap}>一条线--方线帽</button>
        <button onClick={drawRoundLineCap}>一条线--圆线帽</button>
        
    </div>

}

export default LinearPath;